<template>
  <!-- start  -->
  <div style="width: 100%; height: 100%">
    <el-form :inline="true" class="demo-form-inline" style="text-align: left">
      <el-form-item :label="$t('user.Fuzzyquery')" style="">
        <!-- <el-input
          v-model="searchname"
          placeholder="请输入查询的文字"
        ></el-input> -->
        <el-autocomplete
          class="inline-input"
          v-model="searchname"
          :fetch-suggestions="querySearchAsync"
          :trigger-on-focus="true"
          :select-when-unmatched="true"
          @select="handleSelect"
          @clear="handleClear"
          :placeholder="$t('user.InputUserKeyName')"
          clearable
          size="medium"
          prefix-icon="el-icon-search"
        >
          <template slot-scope="{ item }">
            <span style="float: left">{{ item.name }}</span>
            <span style="float: right">{{ item.id }}</span>
          </template>
          
        </el-autocomplete>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          size="small"
          @click="searchclick"
          icon="el-icon-search"
          >{{ $t("user.Search") }}</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          size="small"
          @click="add"
          icon="el-icon-circle-plus-outline"
          >{{ $t("user.Add") }}</el-button
        >
      </el-form-item>
    </el-form>

    <el-dialog
      :title="$t('user.UserInfo')"
      :visible.sync="showAdd"
      :close-on-click-modal="false"
      top
    >
      <el-form
        :model="userdata"
        :rules="rules"
        ref="registerRef"
        label-width="100px"
      >
        <el-tabs v-model="activeName" @tab-click="tabClick" type="card">
          <el-tab-pane :label="$t('user.BasicInfor')" name="first">
            <el-form-item :label="$t('user.Picture')">
              <!-- <template>
            <div class="file_box">
              <div class="upload">
                <input
                  type="file"
                  id=""
                  value=""
                  name="saveFile"
                  v-on:change="tirggerFile($event)"
                />
                <img :src="userdata.form.imgURL" alt="" />
              </div>
            </div>
          </template> -->
              <el-upload
                ref="myUpload"
                name="files"
                :action="fileUploadURL"
                list-type="picture-card"
                :limit="1"
                class="avatar-uploader"
                :class="{ disabled: uploadDisabled }"
                :on-preview="handlePictureCardPreview"
                :on-remove="handlePictureRemove"
                :on-success="handlePictureSuccess"
                :on-error="handlePictureError"
                :fileList="userdata.fileList"
              >
                <img
                  v-if="userdata.form.imgURL"
                  :src="userdata.form.imgURL"
                  class="avatar"
                />
                <i v-else class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible" size="tiny">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
            </el-form-item>
            <!-- validate-event属性的作用是: 输入时不触发表单验证.提交时再验证,你也可以设置成动态验证 -->
            <el-form-item :label="$t('user.Name')" prop="name">
              <el-tooltip
                class="item"
                effect="dark"
                :content="$t('user.InputName')"
                placement="top-start"
              >
                <el-input
                  v-model="userdata.name"
                  auto-complete="off"
                  maxlength="20"
                  :placeholder="$t('user.InputName')"
                  :validate-event="true"
                ></el-input>
              </el-tooltip>
            </el-form-item>
            <el-form-item :label="$t('user.Password')" prop="password">
              <el-tooltip
                class="item"
                effect="dark"
                :content="$t('user.InputPassword')"
                placement="top-start"
              >
                <el-input
                  type="password"
                  v-model="userdata.password"
                  auto-complete="off"
                  maxlength="50"
                  :placeholder="$t('user.InputPassword')"
                  :validate-event="true"
                ></el-input>
              </el-tooltip>
            </el-form-item>
            <el-form-item :label="$t('user.Password')" prop="password2">
              <el-tooltip
                class="item"
                effect="dark"
                :content="$t('user.InputConfirmPassword')"
                placement="top-start"
              >
                <el-input
                  type="password"
                  v-model="userdata.password2"
                  auto-complete="off"
                  maxlength="50"
                  :placeholder="$t('user.InputConfirmPassword')"
                  :validate-event="true"
                ></el-input>
              </el-tooltip>
            </el-form-item>
            <el-form-item :label="$t('user.Email')" prop="email">
              <el-tooltip
                class="item"
                effect="dark"
                :content="$t('user.InputEmail')"
                placement="top-start"
              >
                <el-input
                  type="email"
                  v-model="userdata.email"
                  auto-complete="off"
                  maxlength="50"
                  :placeholder="$t('user.InputEmail')"
                  :validate-event="true"
                ></el-input>
              </el-tooltip>
            </el-form-item>
            <el-form-item :label="$t('user.Tel')" prop="phonenumber">
              <el-tooltip
                class="item"
                effect="dark"
                :content="$t('user.InputTel')"
                placement="top-start"
              >
                <el-input
                  type="tel"
                  v-model="userdata.phonenumber"
                  auto-complete="off"
                  maxlength="50"
                  :placeholder="$t('user.InputTel')"
                  :validate-event="true"
                ></el-input>
              </el-tooltip>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane :label="$t('user.Othter')" name="second">
            <el-form-item :label="$t('user.administrator')">
              <el-switch v-model="form.flag"></el-switch>
            </el-form-item>
            <el-form-item :label="$t('user.Birthday')">
              <el-col :span="11">
                <el-date-picker
                  type="date"
                  :placeholder="$t('user.SelectDate')"
                  v-model="form.birthday"
                  value-format="yyyy-MM-dd"
                  style="width: 100%"
                ></el-date-picker>
              </el-col>
              <el-col :span="13"> </el-col>
            </el-form-item>
            <el-form-item :label="$t('user.Sex')">
              <el-radio-group v-model="form.sex">
                <el-radio :label="$t('user.Man')"></el-radio>
                <el-radio :label="$t('user.Women')"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item :label="$t('user.Hobby')">
              <el-checkbox-group v-model="form.aihao">
                <el-checkbox
                  :label="$t('user.Sports')"
                  name="type"
                ></el-checkbox>
                <el-checkbox
                  :label="$t('user.Technology')"
                  name="type"
                ></el-checkbox>
                <el-checkbox
                  :label="$t('user.Music')"
                  name="type"
                ></el-checkbox>
                <el-checkbox
                  :label="$t('user.Literature')"
                  name="type"
                ></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item :label="$t('user.Department')">
              <el-select
                v-model="form.depart"
                :placeholder="$t('user.SelectDepartment')"
              >
                <el-option
                  :label="$t('user.Department1')"
                  value="部门一"
                ></el-option>
                <el-option
                  :label="$t('user.Department2')"
                  value="部门二"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item :label="$t('user.Othter')">
              <el-row
                v-for="item in form.beikao"
                :key="item.message"
                style="margin-top: 5px"
              >
                <el-col :span="10">
                  <el-input
                    prefix-icon="el-icon-edit"
                    :autosize="{ minRows: 1, maxRows: 3 }"
                    :placeholder="$t('user.InputContent')"
                    v-model="item.message"
                  >
                  </el-input
                ></el-col>
                <el-col :span="14" style="text-align: center"
                  ><el-button
                    type="danger"
                    @click="delbeikao(item)"
                    icon="el-icon-delete"
                  ></el-button>
                  <el-button
                    type="primary"
                    @click="addbeikaobefore(item)"
                    icon="el-icon-circle-plus-outline"
                  ></el-button>
                  <el-button
                    type="success"
                    @click="addbeikaoafter(item)"
                    icon="el-icon-circle-plus-outline"
                  ></el-button
                ></el-col>
              </el-row>
            </el-form-item>
          </el-tab-pane>
        </el-tabs>

        <el-form-item>
          <!-- 提交的时候传入的是表单的ref -->
          <el-button @click="cancel">{{ $t("user.Cancel") }}</el-button>
          <el-button type="primary" @click="save('registerRef')">{{
            $t("user.OK")
          }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-table
      :data="users"
      border
      style="width: 100%"
      v-loading="loading"
      element-loading-text="LOADING...."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.3)"
    >
      <el-table-column
        fixed
        prop="userimg"
        :label="$t('user.Picture')"
        width="150"
      >
        <template slot-scope="scope">
          　　　　<img
            :src="getimgurl(scope.row)"
            style="width: 80px; height: auto"
            alt=""
          />
          　　
        </template>
      </el-table-column>
      <el-table-column prop="id" label="ID"> </el-table-column>
      <el-table-column prop="name" :label="$t('user.Name')"> </el-table-column>
      <el-table-column prop="email" :label="$t('user.Email')">
      </el-table-column>
      <el-table-column prop="phonenumber" :label="$t('user.Tel')">
      </el-table-column>
      <el-table-column fixed="right" :label="$t('user.Operation')" width="200">
        <template slot-scope="scope">
          <el-button
            @click="eidt(scope.row)"
            type="success"
            size="small"
            icon="el-icon-edit"
            >{{ $t("user.Edit") }}</el-button
          >
          <el-button
            @click="deleteuser(scope.row)"
            type="danger"
            size="small"
            icon="el-icon-delete"
            >{{ $t("user.Delete") }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[1, 2, 5, 10]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
  <!-- end  -->
</template>

<script>
import Vue from "vue";
//  imgUrl:require( './../../assets/logo.png');

import defaultimg from "../../assets/add.png";
import common from "../../common/common.vue";
export default {
   // 表单验证规则
  data() {
    // var checkEmail = (rule, value, callback) => {
    //   const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
    //   if (!value) {
    //     return callback(new Error('邮箱不能为空'))
    //   }
    //   setTimeout(() => {
    //     if (mailReg.test(value)) {
    //       callback()
    //     } else {
    //       callback(new Error('请输入正确的邮箱格式'))
    //     }
    //   }, 100)
    // }

    return {
      // 操作标记
      operation: "用户一览",

      fileUploadURL: Vue.prototype.base_url + "/file/fileUpload",
      dialogImageUrl: "",

      dialogVisible: false,
      // 表格数据加载中：loading:true ；完毕：loading:false
      loading: true,
      // 表单验证规则
      // rules: {
      //   name: [
      //     { required: true, message: this.$t("user.InputName") }, // 'blur'是鼠标失去焦点的时候会触发验证
      //     { min: 1, max: 20, message: this.$t("user.Min1max20") },
      //   ],
      //   password: [
      //     { required: true, message: this.$t("user.InputPassword") }, // 'blur'是鼠标失去焦点的时候会触发验证
      //     { min: 1, max: 50, message: this.$t("user.Min1max50") },
      //   ],
      //   password2: [
      //     { required: true, message: this.$t("user.InputConfirmPassword") }, // 'blur'是鼠标失去焦点的时候会触发验证
      //     { min: 1, max: 50, message: this.$t("user.Min1max50") },
      //   ],
      //   email: [
      //     { validator: common.checkEmail, trigger: "blur", required: true },
      //   ],
      //   phonenumber: [
      //     { validator: common.checkPhone, trigger: "blur", required: true },
      //   ],
      // },

      // 哪一个TAB处于激活状态
      activeName: "first",

      // 第二个TAB 中的项目值 不更新数据库
      form: {
        flag: true,
        sex: "女",
        aihao: ["体育", "文学"],
        birthday: "",
        depart: "部门一",
        beikao: [{ message: "备考1" }, { message: "备考2" }],
      },
      // 模糊查询结果数组
      names: [],

      // 一个用户信息
      userdata: {
        id: 0,
        name: "",
        password: "",
        password2: "",
        email: "",
        phonenumber: "",
        userimg: defaultimg, // 图片的相对路径 真正传递到后台的图片路径

        form: {
          imgURL: defaultimg, // 图片的全路径
        },
        fileList: [], // 编辑状态的时候 图片显示在默认列表中，主要是为了展示用。
      },

      // 表格
      userIndex: -1, //选中的用户索引 (-1:表示未选中)
      showAdd: false,
      isNowPage: true,
      users: [],

      // 分页
      searchname: "",
      total: 0, //实现动态绑定
      pageSize: 2,
      currentPage: 1,

      // // 语言
      // language: "0",
    };
  },
  //计算属性 当选中图像后 需要隐藏选择按钮图片
  computed: {
    uploadDisabled: function () {
      // alert(this.userdata.userimg != "");
      return this.userdata.userimg != "";
    },
    
    // 表单验证规则
    rules() {
      return {
        //注意此处的return，别忘记了
        name: [
          { required: true, message: this.$t("user.InputName") }, // 'blur'是鼠标失去焦点的时候会触发验证
          { min: 1, max: 20, message: this.$t("user.Min1max20") },
        ],
        password: [
          { required: true, message: this.$t("user.InputPassword") }, // 'blur'是鼠标失去焦点的时候会触发验证
          { min: 1, max: 50, message: this.$t("user.Min1max50") },
        ],
        password2: [
          { required: true, message: this.$t("user.InputConfirmPassword") }, // 'blur'是鼠标失去焦点的时候会触发验证
          { min: 1, max: 50, message: this.$t("user.Min1max50") },
        ],
        email: [
          { validator: common.checkEmail, trigger: "blur", required: true },
        ],
        phonenumber: [
          { validator: common.checkPhone, trigger: "blur", required: true },
        ],
      };
    },
  },
  methods: {
    // 删除备考
    delbeikao(obj) {
      let id = this.form.beikao.findIndex(
        (item) => item.message == obj.message
      );
      var that = this;
      if (this.form.beikao.length == 1) {
        // 至少要有一个备考信息
        this.$message({
          showClose: true,
          message: that.$t("user.Leastoneinfo"),
          type: "error",
        });
        return;
      }
      this.form.beikao.splice(id, 1);
    },
    // 添加备考
    addbeikaobefore(obj) {
      let id = this.form.beikao.findIndex(
        (item) => item.message == obj.message
      );
      this.form.beikao.splice(id, 0, { message: "" });
    },
    addbeikaoafter(obj) {
      let id =
        this.form.beikao.findIndex((item) => item.message == obj.message) + 1;
      this.form.beikao.splice(id, 0, { message: "" });
    },
    // 选项卡单击事件
    tabClick(tab, event) {
      console.log(tab, event);
    },
    // Autocomplete
    querySearchAsync(queryString, cb) {
      let url;
      // url = "/api/uservue/getUsersByName";
      // url = Vue.prototype.base_url + "/uservue/getUsersByName";
      url = "/uservue/getUsersByName"; // Vue.prototype.base_url  ⇒移动到main.js 拦截器中 config.baseURL =Vue.prototype.base_url;
      let data = this.$qs.stringify({
        name: queryString,
      });
      var that = this;
      this.$axios
        .post(url, data)
        .then((res) => {
          console.log(res.data);

          //在这里为这个数组中每一个对象加一个value字段, 因为autocomplete只识别value字段并在下拉列中显示
          for (let i of res.data) {
            i.value = i.name; //将想要展示的数据作为value
          }
          that.names = res.data;

          cb(res.data);
        })
        .catch((error) => {
          console.log("error====>" + JSON.stringify(error));
        });

      // this.$axios
      //   .post({
      //     url: this.$http.adornUrl("/sys/selct/companyname"),

      //     method: "post",

      //     params: this.$http.adornParams({
      //       companyName: queryString,
      //     }),
      //   })
      //   .then(({ data }) => {
      //     for (var i = 0; i < data.data.length; i++) {
      //       data.data[i].value = data.data[i].companyName;
      //     }

      //     cb(data.data);
      //   });
    },
    handleSelect(item) {
      //this.$emit("select", item);
    },
    handleClear() {
      //this.$emit("select", {});
    },
   
    // 分页开始---------------------------------
    //当改变每页显示条数的选择器时会触发的事件
    handleSizeChange(size) {
      // 每页显示的数量是我们选择器选中的值size
      this.pageSize = size;
      console.log(this.pageSize); //每页下拉显示数据
      this.search();
    },
    //当改变当前页数的时候触发的事件
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
      this.search();
    },
    //获取用户记录的信息分页
    searchclick() {
      this.currentPage = 1;
      this.search();
    },
    // async实现异步
    async search() {
      var user = {};
      user.id = -1;
      user.name = this.searchname;
      user.password = "";
      user.email = "";
      user.phonenumber = "";
      user.userimg = "";
      this.loading = true;
      var that = this;

      // await  new Promise(
      //       (resolve, reject) => {
      //                   setTimeout(() => {
      //                       resolve(2 * 30)
      //                   }, 2000);
      //         } );
      // alert(0);

      // await 实现同步
      await new Promise((resolve, reject) => {
        setTimeout(async () => {
          //调用 获取total数据的方法
          console.log(0);
          that.counttotal(user);
          console.log(2);
          let url;
          // url = "/api/uservue/getUsers";
          // url = Vue.prototype.base_url + "/uservue/getUsers";
          url = "/uservue/getUsers"; // Vue.prototype.base_url  ⇒移动到main.js 拦截器中 config.baseURL =Vue.prototype.base_url;
          let data = that.$qs.stringify({
            name: that.searchname,
            start: (that.currentPage - 1) * that.pageSize,
            pageSize: that.pageSize,
          });

          await that.$axios
            .post(url, data)
            .then((res) => {
              that.users = res.data;
              that.loading = false;
              console.log(res.data);
              //成功的时候调用resolve 这样才能执行 后面的代码alert(1)
              resolve(res);
            })
            .catch((error) => {
              console.log("error====>" + JSON.stringify(error));
              //失败的时候调用reject 这样才能执行 后面的代码alert(1)
              reject(error);
            });
        }, 500);
      });
      // alert(1);
    },
    //获取用户总条数
    async counttotal(user) {
      var url;
      var data;

      // url = "/api/uservue/getUsersTotal";
      // url = Vue.prototype.base_url + "/uservue/getUsersTotal";
      url = "/uservue/getUsersTotal"; // Vue.prototype.base_url  ⇒移动到main.js 拦截器中 config.baseURL =Vue.prototype.base_url;
      data = this.$qs.stringify(user);
      console.log(1);
      await this.$axios
        .post(url, data)
        .then((res) => {
          this.total = res.data;
          //  alert(res.data);
          console.log(3);
        })
        .catch((error) => {
          console.log("error====>" + JSON.stringify(error));
        });
    },
    // 分页结束---------------------------------
    // 保存
    save(formName) {
      console.log(this.userdata);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var that = this;
          var user = {};

          user.id = this.userdata.id;
          user.name = this.userdata.name;
          user.password = this.userdata.password;
          user.email = this.userdata.email;
          user.phonenumber = this.userdata.phonenumber;
          user.userimg = this.userdata.userimg;

          var url;
          var data;
          if (that.userIndex == -1) {
            // 添加保存
            // url = "/api/uservue/addSaveUserData";
            // url = Vue.prototype.base_url + "/uservue/addSaveUserData";
            url = "/uservue/addSaveUserData"; // Vue.prototype.base_url  ⇒移动到main.js 拦截器中 config.baseURL =Vue.prototype.base_url;
            data = that.$qs.stringify({
              // 使用 sq 插件对 axios 中 json 数据进行转换
              name: user.name,
              password: user.password,
              email: user.email,
              phonenumber: user.phonenumber,
              userimg: user.userimg,
            });
          } else {
            // 编辑保存
            // url = "/api/uservue/updateSaveUserData";
            // url = Vue.prototype.base_url + "/uservue/updateSaveUserData";
            url = "/uservue/updateSaveUserData"; // Vue.prototype.base_url  ⇒移动到main.js 拦截器中 config.baseURL =Vue.prototype.base_url;
            data = that.$qs.stringify({
              // 使用 sq 插件对 axios 中 json 数据进行转换
              id: user.id,
              name: user.name,
              password: user.password,
              email: user.email,
              phonenumber: user.phonenumber,
              userimg: user.userimg,
            });
          }
          this.$axios
            .post(url, data)
            .then((response) => {
              if (that.userIndex == -1) {
                // 添加保存
                if (response != null && response.data.result == "success") {
                  this.search();
                  that.showAdd = false;
                }
              } else {
                // 编辑保存
                if (response != null && response.data.result == "success") {
                  let id = that.users.findIndex(
                    (item) => item.id == that.userIndex
                  );
                  // Vue.set(that.users, id, user);
                   that.$set(that.users, id, user);
                  that.showAdd = false;
                }
              }
              this.$message({
                message: that.$t("user.Success"),
                type: "success",
                showClose: true,
              });
            })
            .catch((error) => {
              this.$message({
                showClose: true,
                message: "error====>" + JSON.stringify(error),
                type: "error",
              });
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 关闭对话框
    cancel() {
      this.operation = "用户一览";
      this.showAdd = false;
      // 清空自定义用户数据
      this.clearuserdata();
    },
    // 上传图片
    handlePictureRemove(file, fileList) {
      console.log(file, fileList);
      this.userdata.userimg = "";
      this.userdata.form.imgURL = defaultimg;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 文件上传成功时的钩子
    handlePictureSuccess(res, file, fileList) {
      this.userdata.form.imgURL = Vue.prototype.base_url + res.imgUrl;
      this.userdata.userimg = res.imgUrl;
      var that = this;
      this.$notify.success({
        title: that.$t("user.Success"),
        message: that.$t("user.Fileuploadsuccess"),
      });
    },
    // 文件上传失败时的钩子
    handlePictureError(err, file, fileList) {
      var that = this;
      this.$notify.error({
        title: that.$t("user.Error"),
        message: that.$t("user.Fileuploaderror"),
      });
    },
    // 上传
    // tirggerFile(event) {
    //   let self = this;
    //   let file = event.target.files[0];
    //   let param = new FormData(); // 创建form对象
    //   param.append("files", file, file.name); // 通过append向form对象添加数据
    //   param.append("type", "1"); // 添加form表单中其他数据
    //   console.log(param.get("file")); // FormData私有类对象，访问不到，可以通过get判断值是否传进去
    //   let config = {
    //     headers: { "Content-Type": "multipart/form-data" },
    //   };
    //   // 添加请求头
    //   this.$axios
    //     .post("/api/file/fileUpload", param, config)
    //     .then((response) => {
    //       if (response.status == 200 && response.data.result == "success") {
    //         self.userdata.form.imgURL =
    //           Vue.prototype.base_url  + response.data.imgUrl;
    //         self.userdata.userimg = response.data.imgUrl;
    //         //  alert(self.form.imgURL);
    //         // self.form.img = response.data.data.img;
    //         // self.form.imgURL  ='http://www.baidu.com/'+response.data.data.img;
    //       }
    //     });
    // },
    //   添加
    add: function () {
      this.operation = "用户添加";
      this.userIndex = -1;
      this.showAdd = true;
      this.userdata.id = -1;

      // 清空自定义用户数据
      this.clearuserdata();
    },
    // 清空自定义用户数据
  // 清空自定义用户数据
    clearuserdata() {
      var userdata = {
        // 一个用户信息
        id: 0,
        name: "",
        password: "",
        password2: "",
        email: "",
        phonenumber: "",
        userimg: "", // 图片的相对路径 真正传递到后台的图片路径
        form: {
          imgURL: defaultimg, // 图片的全路径
        },
        fileList: [], // 编辑状态的时候 图片显示在默认列表中，主要是为了展示用。
      };
      this.userdata = userdata;
      // this.userdata.name = "";
      // this.userdata.password = "";
      // this.userdata.password2 = "";
      // this.userdata.email = "";
      // this.userdata.phonenumber = "";
      // this.userdata.userimg = "";
      // this.userdata.form.imgURL = defaultimg;
      // // 清空上传图片列表
      // this.userdata.fileList = [];
      var self = this;
      this.form = {
        flag: true,
        sex: self.$t("user.Women"),
        aihao: [self.$t("user.Sports"), self.$t("user.Literature")],
        birthday: "",
        depart: self.$t("user.Department1"),
        beikao: [
          { message: self.$t("user.Othter1") },
          { message: self.$t("user.Othter2") },
        ],
      };
      // 清除表单校验的提示
      if (this.$refs["registerRef"]) {
        this.$refs["registerRef"].resetFields();
      }
    },
    // 编辑
    eidt(u) {
      this.operation = "用户编辑";
      // 清空自定义用户数据
      this.clearuserdata();

      this.userIndex = Number(u.id);

      this.showAdd = true;

      this.userdata.id = u.id;
      this.userdata.name = u.name;
      this.userdata.password = u.password;
      this.userdata.password2 = u.password;
      this.userdata.email = u.email;
      this.userdata.phonenumber = u.phonenumber;
      this.userdata.form.imgURL = Vue.prototype.base_url + u.userimg;
      this.userdata.userimg = u.userimg;

      // 清空上传图片列表
      // this.$refs["myUpload"].clearFiles();
      this.userdata.fileList = [];
      // 图片列表中加入当前用户的图片 注意：这里仅仅是展示用，真正传递到后台的图片路径是 this.userdata.userimg

      this.userdata.fileList.push({
        name: "edit.jpg",
        url: this.userdata.form.imgURL,
      });
    },
    // 图片变化
    getimgurl(item) {
      return Vue.prototype.base_url + item.userimg;
    }, // 删除
    deleteuser(u) {
      this.userIndex = Number(u.id);
      var delid = this.userIndex;
      var that = this;
      var user = u;
      var url;
      var data;
      // url = "/api/uservue/delete";
      // url = Vue.prototype.base_url + "/uservue/delete";
      url = "/uservue/delete"; // Vue.prototype.base_url  ⇒移动到main.js 拦截器中 config.baseURL =Vue.prototype.base_url;
      // 使用 sq 插件对 axios 中 json 数据进行转换
      data = that.$qs.stringify(user);
      this.$axios
        .post(url, data)
        .then((response) => {
          if (response != null && response.data.result == "success") {
            let id = that.users.findIndex((item) => item.id == delid);
            this.users.splice(id, 1);
          }
          this.$message({
            message: that.$t("user.Success"),
            type: "success",
            showClose: true,
          });
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            message: "error====>" + JSON.stringify(error),
            type: "error",
          });
        });

      // Vue.delete( this.users, id);
      this.userIndex = -1;
    },
  },
  created: function () {
    this.search();
    // var tlanguage = localStorage.getItem("lan") || "zh";
    // this.language = tlanguage == "zh" ? "0" : "1";
    // alert(this.language);

    //alert(Vue.prototype.base_url +);
  },
  mounted() {
 
  },
};
</script>
<style scoped>
.avatar {
  height: auto;
  width: auto;
  max-height: 300px;
  max-width: 100%;
}
</style>